{% extends "component/event/event-info-base.html" %}
{% load i18n %}

{% block signup_info %}
	{{block.super}}
{% endblock%}

{% block signup_button %}
	{% if signupOnGoing %}
	<div class="row">
		<div class="col-md-3">
			<a class="btn btn-success" href="/events/{{event.id}}/signup/"><i class="fa fa-sign-in"></i> {% trans "Sign up now" %}</a>
		</div>
		<div class="col-md-7">
			<div class="input-group">		
				<input class="form-control" id="signupkey" type="text" placeholder='{% trans "enter signup key" %}'>
				<span class="input-group-btn">
					<a class="btn btn-primary " id="modifyBtn"><i class="fa fa-pencil"></i> {% trans "modify signup info" %}</a>
				</span>
			</div>
		</div>
		<script type="text/javascript">
			$('#modifyBtn').click(function () {
				if( $('#signupkey').val().length == 0 )
				{
					 $('#signupkey').attr('placeholder', '{% trans "enter signup key" %}')
					return false;
				}
				$(this).attr('href', '/events/{{event.id}}/signupmodify/'+ $('#signupkey').val() + '/');
			});
			$('#signupkey').tooltip({
				selector: true,
				placement: 'bottom',
				title: '{% trans "enter signup key" %}',
				animation: false,
				container: 'body',
			});
		</script>
	</div>
	{% endif %}
	{% if hasRecord %}
	<div class="row">
		<div class="col-md-3">
			<a class="btn btn-primary " href="/events/{{event.id}}/result/"><i class="fa fa-list-ol"></i> {% trans "Events record" %}</a>
		</div>
	</div>
	{% endif %}
{% endblock %}

{% block kind_reminding %}
	{% include "component/event/event-info-kindremind.html" %}
{% endblock %}

{% block signup_info_extra %}
{% if hasRecord %}
{% else %}
<div id="map_canvas" style="width:100%; height:250px"></div>
<div style="margin-top:3px">
	<a class="btn btn-info" target="_blank" href="http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q={{event.fieldAddress}}&z=16&t="><i class="fa fa-search"></i> {% trans "Open google map in new tab" %}</a>
</div>
{% endif %}
{% endblock %}